<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>轻量级倒计时demo</title>
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="js/leftTime.min.js"></script>
  <style type="text/css">
    *,
    html,
    body {
      padding: 0;
      margin: 0;
      font-size: 12px;
      outline: none;
      font-family: "微软雅黑", arial;
    }
    
    .wrap-box {
      width: 1100px;
      min-width: 1100px;
      margin: 6% auto;
    }
    
    h1 {
      line-height: 2;
      font-size: 30px;
      text-align: center;
      margin-bottom: 40px;
    }
    
    table.data-table {
      width: 100%;
    }
    
    table.data-table tr:odd {
      background: #dcebff;
    }
    
    table.data-table td {
      line-height: 24px;
      padding: 3px;
      vertical-align: top;
    }
    
    table.data-table th {
      height: 50px;
      line-height: 50px;
      padding: 3px;
      font-size: 20px;
      text-align: left;
    }
    
    table.data-table .colspan-a {
      width: 35%;
    }
    
    table.data-table .colspan-b {
      width: 25%;
    }
    
    table.data-table .colspan-c {
      width: 40%;
    }
    
    table.data-table td pre {
      display: block;
      padding: 5px;
      border: 1px solid #00caff;
      background: #f8fcff;
      text-align: left;
    }
    
    .testBtn-a {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border: 0;
      border-radius: 5px;
      color: #fff;
      background: rgb(65, 133, 244);
      cursor: pointer;
    }
    
    .testBtn-a.on {
      background: #c9c9c9;
      color: #666;
      cursor: default;
    }
    
    .data-show-box {
      line-height: 30px;
    }
    
    .date-tiem-span,
    .date-s-span {
      display: inline-block;
      font-size: 18px;
      width: 36px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      border-radius: 5px;
    }
    
    .date-tiem-span {
      background: #333;
    }
    
    .date-s-span {
      background: #f00;
    }
    
    .date-select-a {
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <div class="wrap-box">
    <h1>轻量级倒计时插件</h1>
    <table cellpadding="0" cellspacing="0" class="data-table">
      <tr>
        <th colspan="3">60秒倒计时</th>
      </tr>
      <tr>
        <td class="colspan-a"><button type="button" class="testBtn-a" id="dateBtn1">获取验证码</button></td>
        <td class="colspan-b"></td>
        <td class="colspan-c">
          <pre>$.leftTime(60,function(d){
	//d.status,值true||false,倒计时是否结束;
	//d.s,倒计时秒;
});</pre>

        </td>
      </tr>
      <script type="text/javascript">
        $(function() {
          //60秒倒计时
          $("#dateBtn1").on("click", function() {
            var _this = $(this);
            if (!$(this).hasClass("on")) {
              $.leftTime(60, function(d) {
                if (d.status) {
                  _this.addClass("on");
                  _this.html((d.s == "00" ? "60" : d.s) + "秒后重新获取");
                } else {
                  _this.removeClass("on");
                  _this.html("获取验证码");
                }
              });
            }
          });
        });
      </script>
      <tr>
        <th colspan="3">120秒倒计时</th>
      </tr>
      <tr>
        <td class="colspan-a"><button type="button" class="testBtn-a" id="dateBtnB">获取验证码</button></td>
        <td class="colspan-b"></td>
        <td class="colspan-c">
          <pre>$.leftTime(120,function(d){
	//d.status,值true||false,倒计时是否结束;
	//parseInt(d.m)*60+parseInt(d.s))+"秒后重新获取";
},true);</pre>

        </td>
      </tr>
      <script type="text/javascript">
        $(function() {
          //120秒倒计时
          $("#dateBtnB").on("click", function() {
            var _this = $(this);
            if (!$(this).hasClass("on")) {
              $.leftTime(120, function(d) {
                if (d.status) {
                  _this.addClass("on");
                  _this.html((parseInt(d.m) * 60 + parseInt(d.s)) + "秒后重新获取");
                } else {
                  _this.removeClass("on");
                  _this.html("获取验证码");
                }
              }, true);
            }
          });
        });
      </script>
      <tr>
        <th colspan="3">距2019/01/22 23:45:24倒计时</th>
      </tr>
      <tr>
        <td class="colspan-a">
          <div class="data-show-box" id="dateShow1">
            <span class="date-tiem-span d">00</span>天
            <span class="date-tiem-span h">00</span>时
            <span class="date-tiem-span m">00</span>分
            <span class="date-s-span s">00</span>秒
          </div>
        </td>
        <td class="colspan-b"></td>
        <td class="colspan-c">
          <pre>$.leftTime("2019/01/22 23:45:24",function(d){
	if(d.status){
		//d.status 状态
		//d.d 天
		//d.h 时
		//d.m 分
		//d.s 秒
	}
});</pre>
        </td>
      </tr>
      <script type="text/javascript">
        $(function() {
          //日期倒计时
          $.leftTime("2019/01/22 23:45:24", function(d) {
            if (d.status) {
              var $dateShow1 = $("#dateShow1");
              $dateShow1.find(".d").html(d.d);
              $dateShow1.find(".h").html(d.h);
              $dateShow1.find(".m").html(d.m);
              $dateShow1.find(".s").html(d.s);
            }
          });
        });
      </script>
      <tr>
        <th colspan="3">距时间段倒计时</th>
      </tr>
      <tr>
        <td class="colspan-a">
          <span id="dataInfoShow_1"></span>
          <div class="data-show-box" id="dateShow2">
            <span class="date-tiem-span d">00</span>天
            <span class="date-tiem-span h">00</span>时
            <span class="date-tiem-span m">00</span>分
            <span class="date-s-span s">00</span>秒
          </div>
        </td>
        <td class="colspan-b">
          <div class="">
            当前系统时间：<select class="date-select-c" id="getTimeSct_1">
	    						<option value="0">正常</option>
	    						<option value="1">快1分钟</option>
	    						<option value="5">快5分钟</option>
	    						<option value="-5">慢5分钟</option>
	    					</select><br /> 今日开始时间：
            <select class="date-select-a" id="getTimeSct_2"></select>时<select class="date-select-b" id="getTimeSct_3"></select>分<br /> 结束时间：
            <select class="date-select-a" id="getTimeSct_4"></select>时<select class="date-select-b" id="getTimeSct_5"></select>分<br /> 选择天数：
            <select class="date-select-c" id="getTimeSct_6">
			    						<option value="0">今天</option>
			    						<option value="1" selected="selected">明天</option>
			    						<option value="2">后天</option>
			    					</select><br /> 是否跳过开始时间：
            <select class="date-select-c" id="getTimeSct_7">
			    						<option value="false" selected="selected">否</option>
			    						<option value="true">是</option>
			    					</select><br /> 未满10时是否加0：
            <select class="date-select-c" id="getTimeSct_8">
			    						<option value="false">否</option>
			    						<option value="true" selected="selected">是</option>
			    					</select><br />
            <button type="button" class="testBtn-a" id="dateBtn2">立即执行</button>
          </div>
        </td>
        <td class="colspan-c">
          <pre>var data={
	nowdate:系统时间,
	startdate:开始时间，格式为：h:m或日期格式,
	enddate：结束时间，格式为：h:m或日期格式,
	setday:提前天数，例如：0为当天，1为明天,
	init:是否跳过开始时间，默认是false，当为true倒计时跳过开始时间
}
$.leftTime(data,function(d){
	if(d.status){
		//d.step 0表示普通倒计时，1表示未过开始时间，2表示已过开始时间未过结束时间，3表示已过结束时间；
	}
},//未满10时是否加0，值false||true，默认值为true);
</pre>
        </td>
      </tr>
      <script type="text/javascript">
        $(function() {
          //时间段
          function checkIFn(i) {
            if (i < 10) {
              i = "0" + i;
            }
            return i;
          }
          for (var i = 0; i < 24; i++) {
            $("select.date-select-a").append('<option value="' + checkIFn(i) + '" ' + (i == 9 ? 'selected="selected"' : "") + '>' + checkIFn(i) + '</option>');
          }
          for (var i = 0; i < 60; i++) {
            $("select.date-select-b").append('<option value="' + checkIFn(i) + '">' + checkIFn(i) + '</option>');
          }
          var clearTime1 = 0;

          function setDateSelectedFn() {
            //清除时间
            window.clearInterval(clearTime1);
            var $getTimeSct1 = $("#getTimeSct_1"),
              $getTimeSct2 = $("#getTimeSct_2"),
              $getTimeSct3 = $("#getTimeSct_3"),
              $getTimeSct4 = $("#getTimeSct_4"),
              $getTimeSct5 = $("#getTimeSct_5"),
              $getTimeSct6 = $("#getTimeSct_6"),
              $getTimeSct7 = $("#getTimeSct_7"),
              $getTimeSct8 = $("#getTimeSct_8");
            /*== 获取数据 ==*/
            var data = {};
            //系统时间
            data.nowdate = new Date().getTime() + (parseInt($getTimeSct1.find("option:selected").val()) * 60 * 1000);
            //开始时间
            data.startdate = $getTimeSct2.find("option:selected").val() + ":" + $getTimeSct3.find("option:selected").val();
            //结束时间
            data.enddate = $getTimeSct4.find("option:selected").val() + ":" + $getTimeSct5.find("option:selected").val();
            //天数
            data.setday = parseInt($getTimeSct6.find("option:selected").val());
            //是否跳过开始
            data.init = $getTimeSct7.find("option:selected").val() == "false" ? false : true;
            clearTime1 = $.leftTime(data, function(d) {
              if (d.status) {
                var $dateShow1 = $("#dateShow2");
                $dateShow1.find(".d").html(d.d);
                $dateShow1.find(".h").html(d.h);
                $dateShow1.find(".m").html(d.m);
                $dateShow1.find(".s").html(d.s);
                switch (d.step) {
                  case 1:
                    $("#dataInfoShow_1").html("距离开始时间：");
                    break;
                  case 2:
                    $("#dataInfoShow_1").html("距离结束时间：");
                    break;
                  case 3:
                    $("#dataInfoShow_1").html("倒计时已结束：");
                    break;
                  default:
                    $("#dataInfoShow_1").html("");
                    break;
                }
              }
            }, $getTimeSct8.find("option:selected").val() == "false" ? false : true);
          }
          //初始化
          setDateSelectedFn();
          //手动触发
          $("#dateBtn2").on("click", setDateSelectedFn);
        });
      </script>
      <tr>
        <th colspan="3">距时间段,手动输入倒计时</th>
      </tr>
      <tr>
        <td class="colspan-a">
          <span id="dataInfoShow_2"></span>
          <div class="data-show-box" id="dateShow3">
            <span class="date-tiem-span d">00</span>天
            <span class="date-tiem-span h">00</span>时
            <span class="date-tiem-span m">00</span>分
            <span class="date-s-span s">00</span>秒
          </div>
        </td>
        <td class="colspan-b">
          <div class="">
            当前系统时间：<input type="text" value="" id="getTimeIpt_1"><br /> 开始时间：
            <input type="text" value="2018/01/01 00:00:00" id="getTimeIpt_2"><br /> 结束时间：
            <input type="text" value="2019/07/11 12:00:00" id="getTimeIpt_3"><br /> 是否跳过开始时间：
            <select class="date-select-c" id="getTimeIpt_5">
			    						<option value="false" selected="selected">否</option>
			    						<option value="true">是</option>
			    					</select><br /> 未满10时是否加0：
            <select class="date-select-c" id="getTimeIpt_6">
			    						<option value="false">否</option>
			    						<option value="true" selected="selected">是</option>
			    					</select><br />
            <button type="button" class="testBtn-a" id="dateBtn3">立即执行</button>
          </div>
        </td>
        <td class="colspan-c">
          <pre>
	工作方式同上
</pre>
        </td>
      </tr>
      <script type="text/javascript">
        $(function() {
          //距离时间段手动输入
          $("#getTimeIpt_1").val(new Date().format("yyyy/MM/dd hh:mm:ss"));
          var clearTime2 = 0;

          function setDateImportFn() {
            //清除时间
            window.clearInterval(clearTime2);
            var $getTimeIpt1 = $("#getTimeIpt_1"),
              $getTimeIpt2 = $("#getTimeIpt_2"),
              $getTimeIpt3 = $("#getTimeIpt_3"),
              $getTimeIpt4 = $("#getTimeIpt_4"),
              $getTimeIpt5 = $("#getTimeIpt_5"),
              $getTimeIpt6 = $("#getTimeIpt_6");
            /*== 获取数据 ==*/
            var data2 = {};
            //系统时间
            data2.nowdate = $getTimeIpt1.val();
            //开始时间
            data2.startdate = $getTimeIpt2.val();
            //结束时间
            data2.enddate = $getTimeIpt3.val();;
            //是否跳过开始
            data2.init = $getTimeIpt5.find("option:selected").val() == "false" ? false : true;
            clearTime2 = $.leftTime(data2, function(d) {
              if (d.status) {
                var $dateShow1 = $("#dateShow3");
                $dateShow1.find(".d").html(d.d);
                $dateShow1.find(".h").html(d.h);
                $dateShow1.find(".m").html(d.m);
                $dateShow1.find(".s").html(d.s);
                switch (d.step) {
                  case 1:
                    $("#dataInfoShow_2").html("距离开始时间：");
                    break;
                  case 2:
                    $("#dataInfoShow_2").html("距离结束时间：");
                    break;
                  case 3:
                    $("#dataInfoShow_2").html("倒计时已结束：");
                    break;
                  default:
                    $("#dataInfoShow_2").html("");
                    break;
                }
              }
            }, $getTimeIpt6.find("option:selected").val() == "false" ? false : true);
          }
          //初始化
          setDateImportFn();
          //手动触发
          $("#dateBtn3").on("click", setDateImportFn);
        });
      </script>
      <tr>
        <th colspan="3">清除倒计时</th>
      </tr>
      <tr>
        <td class="colspan-a">
          <div class="data-show-box" id="dateShow4">
            <span class="date-tiem-span d">00</span>天
            <span class="date-tiem-span h">00</span>时
            <span class="date-tiem-span m">00</span>分
            <span class="date-s-span s">00</span>秒
          </div>
          <button type="button" class="testBtn-a" id="dateBtn4">清除时间</button>
        </td>
        <td class="colspan-b"></td>
        <td class="colspan-c">
          <pre>var clearTime=$.leftTime("2019/01/22 23:45:24",function(d){
		if(d.status){
			//回调参数
		}
	});
	//清除倒计时
	window.clearInterval(clearTime);
</pre>
        </td>
      </tr>
      <script type="text/javascript">
        $(function() {
          var clearTime3 = $.leftTime("2019/01/22 23:45:24", function(d) {
            if (d.status) {
              var $dateShow4 = $("#dateShow4");
              $dateShow4.find(".d").html(d.d);
              $dateShow4.find(".h").html(d.h);
              $dateShow4.find(".m").html(d.m);
              $dateShow4.find(".s").html(d.s);
            }
          });
          $("#dateBtn4").click(function() {
            window.clearInterval(clearTime3);
            $("#dateShow4").find("span").html("00");
          });
        });
      </script>
      <tr>
        <th colspan="3">使用方法</th>
      </tr>
      <tr>
        <td class="colspan-c" colspan="3">
          <pre>1、需要引入jquery.js；
2、引入leftTime.min.js文件，即可；
</pre>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>